<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.startTime"
        style="width: 140px;top:1px"
        type="date"
        placeholder="开始日期"
        value-format="yyyy-MM-dd 00:00:00"
      />
      <el-date-picker
        v-model="listQuery.endTime"
        style="width: 140px;top:1px"
        type="date"
        placeholder="结束日期"
        value-format="yyyy-MM-dd 23:59:59"
      />
      <el-select v-model="listQuery.eventType" style="width: 140px" placeholder="事件类型" class="filter-item" :clearable="true">
        <el-option
          v-for="(item,index) in evtList"
          :key="index"
          :label="item.itemValue"
          :value="item.itemKey"
        />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
    </div>
    <el-row>
      <el-col :span="16">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @sort-change="sortChange"
        >
          <el-table-column label="序号" align="center" width="100">
            <template slot-scope="{$index}">
              <span>{{ $index+1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备mac" align="center" width="110px">
            <template slot-scope="{row}">
              <span>{{ row.devCode }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="设备id">-->
          <!--<template slot-scope="{row}">-->
          <!--<span>{{ row.devId }}</span>-->
          <!--</template>-->
          <!--</el-table-column>-->

          <!--<el-table-column label="事件类型" width="110px" align="center">-->
          <!--<template slot-scope="{row}">-->
          <!--<span>{{ row.eventType }}</span>-->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="事件" width="350px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.eventDesc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" align="center">
            <template slot-scope="{row}">
              <span>{{ row.eventTime }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="操作人id" width="110px" align="center">-->
          <!--<template slot-scope="{row}">-->
          <!--<span>{{ row.userId }}</span>-->
          <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column label="设备名称" align="center">-->
          <!--<template slot-scope="{row}">-->
          <!--<span>{{ row.devName }}</span>-->
          <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <!--<div class="title-container">-->
          <!--<span>满意饼状图</span>-->
          <!--</div>-->
          <div class="chart-container">
            <Pie v-if="pieList.length" id="chart12" height="500px" width="100%" :set-option-list="pieList" />
          </div>
        </div>
      </el-col>
    </el-row>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>
<style >
  .filter-container .filter-item{
    margin-bottom:0
  }
</style>
<script>
import { devEventPageQuare, devStatusCount } from '@/api/sysmanage'
import { getDicApi } from '@/api/public'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pie from '@/components/Charts/PieChart'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Ondevices',
  components: { Pagination, Pie },
  directives: { waves },
  data() {
    return {
      dateTime: '',
      tableKey: 0,
      evtList: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        'devCode': '',
        'endTime': '',
        'eventType': '',
        'limit': 10,
        'page': 1,
        'startTime': ''
      },
      pieList: []
    }
  },
  created() {
    this.getList()
    getDicApi({ dictCode: 'dev_event_type' }).then(res => {
      const { data } = res
      this.evtList = data
    })
  },
  methods: {
    getList() {
      this.listLoading = true
      devEventPageQuare(this.listQuery).then(response => {
        console.log('TCL: getList -> response', response)
        const { data } = response
        this.list = data.list
        this.total = data.total
        console.log('TCL: getList -> this.list', this.list)
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
      devStatusCount().then(res => {
        console.log('TCL: devStatusCount -> res', res)
        const { data } = res
        this.pieList = data
        console.log('TCL: getList -> this.pieList', this.pieList)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        status: 'published',
        type: ''
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}`
        ? 'ascending'
        : sort === `-${key}`
          ? 'descending'
          : ''
    }
  }
}
</script>
